<template>
    <div class="absolute" :style="style" id="player">
        <img class="center" id="player_img" :src="img" :style="style_img">
    </div>
</template>


<script setup lang="ts">
    import { ref,reactive,onMounted } from 'vue'
    import {Player} from '../main/player'
    const play = new Player()
    const img = ref(play.img)
    const style = reactive({
        left:play.positionx+'px',
        top:play.positiony+'px'
    })
    const style_img = reactive({
        height:play.height,
        width:play.width,
    })
    var keydown_list:String[] = []
    // 暴露
    defineExpose({
        keydown,
        ressize_event,
        play_update
    })
    // 接受父组件事件
    const emit = defineEmits(['ressize'])
    function keydown(keylist:any){
        keydown_list = keylist
    }
    function ressize_event(dom:any){
        play.ressize_event(dom)
    }
    onMounted(()=>{
        emit('ressize')
    })
    function play_update(){
        var x = ''
        var y = ''
        if (keydown_list.includes('ArrowUp')){
            y='-'
        }else if(keydown_list.includes('ArrowDown')){
            y='+'
        }
        if (keydown_list.includes('ArrowLeft')){
            x='-'
        }else if(keydown_list.includes('ArrowRight')){
            x='+'
        }
        let res = play.update_position(x,y)
        style.left = play.left+'px'
        style.top = play.top+'px'
        return res
    }
    
</script>

<style>
</style>